<template>
  <div :class="[item.config.class, item.configH5['noStyle'] && 'noStyle']">
    <template v-if="!item.configH5['noStyle']">
      <template v-if="item.config['model'] == 'appModel3'">
        <div class="recode-title-content flex-center">
          <span :prop-data="getModelItemConfig('title')" 
          class="title-txt" @click.stop="editModel(item['title'])"
          :style="{
            'font-family': setAttr(item['title'], 'fontFamily'),
            'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['title'], 'color'),
          }">已有{{ orderList.length }}人购买</span>
        </div>
        <div class="recode-content" :style="{
          'background-color': item.configH5['backgroundColor'],
          'border-radius': $px2rem(`${item.configH5['borderRadius']}px`),
        }">
          <div :prop-data="getModelItemConfig('tableTitle')" class="record-header flex-normal" 
            :style="{
              'font-family': setAttr(item['tableTitle'], 'fontFamily'),
              'font-size': item['tableTitle'] ? $px2rem(`${item['tableTitle'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['tableTitle'], 'color'),
            }" @click.stop.prevent="editModel(item['tableTitle'])">
            <span class="col">序号</span>
            <span class="col">车牌号码</span>
            <span class="col">卡券状态</span>
            <span class="col">购买时间</span>
          </div>
          <div :prop-data="getModelItemConfig('tableCol')" class="list" 
            :style="{
              'font-family': setAttr(item['tableCol'], 'fontFamily'),
              'font-size': item['tableCol'] ? $px2rem(`${item['tableCol'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['tableCol'], 'color'),
            }" @click.stop.prevent="editModel(item['tableCol'])">
            <div class="list-content" v-if="orderList.length">
              <div class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
                <span class="col">{{row.id}}</span>
                <span class="col">{{row.clientPlateNumber}}</span>
                <span class="col">已领取</span>
                <span class="col">{{row.createTime}}</span>
              </div>
            </div>
            <div v-else class="no-content flex-center">空空如也~</div>
          </div>
        </div>
      </template>
      <template v-if="item.config['model'] == 'appModel5'">
        <div class="recode-title-content flex-between">
          <div :prop-data="getModelItemConfig('title')" 
          class="title-txt flex-center" @click.stop="editModel(item['title'])"
          :style="{
            'font-family': setAttr(item['title'], 'fontFamily'),
            'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['title'], 'color'),
          }">已有{{ orderList.length }}人购买</div>
          <span class="title-bg"></span>
        </div>
        <div class="recode-content">
          <div :prop-data="getModelItemConfig('tableTitle')" class="record-header flex-normal" 
            :style="{
              'font-family': setAttr(item['tableTitle'], 'fontFamily'),
              'font-size': item['tableTitle'] ? $px2rem(`${item['tableTitle'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['tableTitle'], 'color'),
            }" @click.stop.prevent="editModel(item['tableTitle'])">
            <span class="col">序号</span>
            <span class="col">车牌号码</span>
            <span class="col">卡券状态</span>
            <span class="col">购买时间</span>
          </div>
          <div :prop-data="getModelItemConfig('tableCol')" class="list" 
            :style="{
              'font-family': setAttr(item['tableCol'], 'fontFamily'),
              'font-size': item['tableCol'] ? $px2rem(`${item['tableCol'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['tableCol'], 'color'),
            }" @click.stop.prevent="editModel(item['tableCol'])">
            <div class="list-content" v-if="orderList.length">
              <div class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
                <span class="col">{{row.id}}</span>
                <span class="col">{{row.clientPlateNumber}}</span>
                <span class="col">已领取</span>
                <span class="col">{{row.createTime}}</span>
              </div>
            </div>
            <div v-else class="no-content flex-center">空空如也~</div>
          </div>
        </div>
      </template>
    </template>
    <template v-else>
      <div class="nostyle-content"
      :style="{
        'background': `url(${item.configH5['imageUrl']}) no-repeat center`
      }">
        <template v-if="item.config['model'] == 'appModel3'">
          <div class="recode-content">
            <div :prop-data="getModelItemConfig('tableTitle')" class="record-header flex-normal" 
              :style="{
                'font-family': setAttr(item['tableTitle'], 'fontFamily'),
                'font-size': item['tableTitle'] ? $px2rem(`${item['tableTitle'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['tableTitle'], 'color'),
              }" @click.stop.prevent="editModel(item['tableTitle'])">
              <span class="col">序号</span>
              <span class="col">车牌号码</span>
              <span class="col">卡券状态</span>
              <span class="col">购买时间</span>
            </div>
            <div :prop-data="getModelItemConfig('tableCol')" class="list" 
              :style="{
                'font-family': setAttr(item['tableCol'], 'fontFamily'),
                'font-size': item['tableCol'] ? $px2rem(`${item['tableCol'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['tableCol'], 'color'),
              }" @click.stop.prevent="editModel(item['tableCol'])">
              <div class="list-content" v-if="orderList.length">
                <div class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
                  <span class="col">{{row.id}}</span>
                  <span class="col">{{row.clientPlateNumber}}</span>
                  <span class="col">已领取</span>
                  <span class="col">{{row.createTime}}</span>
                </div>
              </div>
              <div v-else class="no-content flex-center">空空如也~</div>
            </div>
          </div>
        </template>
        <template v-if="item.config['model'] == 'appModel5'">
          <div class="recode-content">
            <div :prop-data="getModelItemConfig('tableTitle')" class="record-header flex-normal" 
              :style="{
                'font-family': setAttr(item['tableTitle'], 'fontFamily'),
                'font-size': item['tableTitle'] ? $px2rem(`${item['tableTitle'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['tableTitle'], 'color'),
              }" @click.stop.prevent="editModel(item['tableTitle'])">
              <span class="col">序号</span>
              <span class="col">车牌号码</span>
              <span class="col">卡券状态</span>
              <span class="col">购买时间</span>
            </div>
            <div :prop-data="getModelItemConfig('tableCol')" class="list" 
              :style="{
                'font-family': setAttr(item['tableCol'], 'fontFamily'),
                'font-size': item['tableCol'] ? $px2rem(`${item['tableCol'].configH5['fontSize']}px`) : '',
                'color': setAttr(item['tableCol'], 'color'),
              }" @click.stop.prevent="editModel(item['tableCol'])">
              <div class="list-content" v-if="orderList.length">
                <div class="record-row flex-normal" v-for="(row) in orderList" :key="row.id">
                  <span class="col">{{row.id}}</span>
                  <span class="col">{{row.clientPlateNumber}}</span>
                  <span class="col">已领取</span>
                  <span class="col">{{row.createTime}}</span>
                </div>
              </div>
              <div v-else class="no-content flex-center">空空如也~</div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { recordModel } from '@/formgen/components/FormConfig/model-config'
import {getOrderList} from '@/formgen/api/index'

export default {
  name: 'DRecord',
  mixins: [mixin],
  data(){
    return {
      recordModel: JSON.parse(JSON.stringify(recordModel)),
      orderList: [],
      total: 0,
    }
  },
  mounted(){
    let _self = this
    _self.getOrderList()
  },
  methods: {
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {model} = _self.item.config
      let config = _self.recordModel[model][key]
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    },
    getOrderList(){
      let _self = this
      let {id = ''} = _self.$route.params
      getOrderList(id, {pageSize: 1, pageNum: 5}).then(res => {
        _self.orderList = res.rows
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.record-model{
    position: relative;
    padding-top: rem(50);
    .no-content{
      height: rem(300);
    }
    .recode-title-content{
      width: rem(503);
      height: rem(89);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: url('/static/image/app-model-3/recode-title-bg.png') no-repeat center;
      background-size: contain;
    }
    .recode-content{
      padding: rem(30);
      .record-header{
        padding: rem(30) 0;        
      }
      .record-row{
        margin-bottom: rem(30);
        &:last-child{
          margin-bottom: 0;
        }
      }
      .col{
        width: 25%;
        text-align: center;
      }
    }
  }
  .app-model-5.record-model{
    position: relative;
    background: linear-gradient(180deg, #46A3E2, #2372BD);
    border-radius: rem(20);
    margin-bottom: rem(30);
    .no-content{
      height: rem(300);
    }
    .recode-title-content{
      .title-txt{
        background: linear-gradient(180deg, #EBFAFE, #D1EEFE);
        opacity: 0.93;
        height: rem(74);
        font-weight: bold;
        padding: 0 rem(30);
        border-radius: 0 0 rem(20) 0;
      }
      .title-bg{
        height: rem(30);
        width: rem(170);
        background: url('/static/image/app-model-5/record-title-bg.png') no-repeat center;
        background-size: contain;
        margin-right: rem(30);
      }
    }
    .recode-content{
      padding: rem(30);
      .record-header{
        padding: rem(30) 0;        
      }
      .record-row{
        margin-bottom: rem(30);
        &:last-child{
          margin-bottom: 0;
        }
      }
      .col{
        width: 25%;
        text-align: center;
      }
    }
  }
  .app-model-3.record-model.noStyle, .app-model-5.record-model.noStyle{
    background: transparent;
    background-size: cover;
    padding-bottom: 0;
    .nostyle-content{
      background: transparent;
      background-size: cover;
    }
  }
  
</style>
